<template>
<!-- 输入框 -->
  <div style="display:inline-block;width: 100%">
    <el-input ref="nuInput" v-bind="$attrs" v-on="$listeners">
      <slot slot="prefix" name="prefix"></slot>
      <slot slot="suffix" name="suffix"></slot>
      <slot slot="prepend" name="prepend"></slot>
      <slot slot="append" name="append"></slot>
      <slot></slot>
    </el-input>
  </div>
</template>

<script>
export default {
  mounted() {
    // 根据size调整高度
    if (this.size == 'large') {
      this.$refs.nuInput.$el.children[0].style.height = '42px'
    }
    if (this.size == 'middle') {
      this.$refs.nuInput.$el.children[0].style.height = '32px'
    }
    if (this.size == 'small') {
      this.$refs.nuInput.$el.children[0].style.height = '28px'
    }
    if (this.size == 'mini') {
      this.$refs.nuInput.$el.children[0].style.height = '24px'
    }
  },
  components: {},
  props: {
    size: {//根据size调整高度
      type: String,
      default: () => 'large',
    },
  },
}
</script>
<style scoped>
/* input输入框 */
::v-deep .el-input__inner {
  border: var(--input-border) !important;
  background-color: var(--input-bgc) !important;
  color: var(--input-color);
}
/* input外部容器 */
::v-deep .el-input {
  /* 边框阴影 */
  /* box-shadow: var(--input-box-shadow) !important; */
}

::v-deep .el-input-group__prepend {
  background-color: var(--input-bgc);
  color: var(--input-color);
}
</style>